<template>
    <div class="header"
        :class="[
            `mode-${themeMode}`, 
            {
                'reverse': menusMode === 'top' && themeMode === 'blue'
            }
        ]">
        <div class="left" :style="leftStyle" v-if="menusMode === 'top'">
            <router-link class="logo" to="/home">
                <img src="@/assets/images/common/logo.png" height="40px" alt="logo" />
                <span class="title">Vue Alain</span>
            </router-link>
        </div>

        <div class="center">
            <!-- 面包屑 -->
            <div class="center-item" v-if="isBreadcrumb && menusMode !== 'top'">
                <BreadCrumb style="border: none;" />
            </div>
            <!-- 菜单 -->
            <div class="center-item" v-if="menusMode === 'top'" style="margin-bottom:">
                <TopMenu mode="horizontal" />
            </div>
        </div>
        <div></div>

        <div class="right">
            <!-- 国际化 -->
            <div class="right-item">
                <International />
            </div>

            <!-- 全屏 -->
            <div class="right-item">
                <FullScreen />
            </div>

            <!-- gitee -->
            <div class="right-item">
                <el-link style="color: inherit;" title="Gitee" href="https://gitee.com/TengDaDa/vue-alain" target="_blank" :underline="false">
                    <FontIcon icon-name="el-icon-link" />
                </el-link>
            </div>

            <!-- 设置 -->
            <div class="right-item">
                <SettingButton />
            </div>
            
            <!-- 用户信息及退出 -->
            <div class="right-item">
                <ExitTpl />
            </div>

        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { loginOutServe } from '@/serve/auth';
import International from '@/components/international/index.vue';
import FullScreen from '@/components/fullScreen/index.vue';
import TopMenu from '@/components/menu/top-menu.vue';
import BreadCrumb from '@/components/breadcrumb/index.vue';
import SettingButton from '@/components/settings/button.vue';
import ExitTpl from '@/components/exit/index.vue';

export default {
    components: {
        International,
        FullScreen,
        TopMenu,
        BreadCrumb,
        SettingButton,
        ExitTpl
    },
    computed: {
        ...mapState({
            menusMode: state => state.settings.menusMode,
            themeMode: state => state.settings.themeMode,
            asideWidth: state => state.base.asideWidth,
            isBreadcrumb: state => state.base.isBreadcrumb,
        }),
        leftStyle() {
            return {width: `${this.asideWidth}px`}
        }
    },
    methods: {
        asyncLoginOut() {
            loginOutServe().then(() => {
                this.$store.dispatch('resetAuthState', null).then(() => {
                    // location.reload();
                    this.$router.push('/login')
                });
            }).catch(async () => {
                this.$store.dispatch('resetAuthState', null).then(() => {
                    // location.reload();
                    this.$router.push('/login')
                });
            })
        },
    },
}
</script>

<style scoped lang="scss">
@import '~@/assets/styles/theme-color.scss';

.header{
    box-sizing: border-box;
    display: flex;
    height: 100%;
    justify-content: space-between;
    border-bottom: 1px solid #E4E7ED;
    background-color: #fff;
    padding-right: 60px;

    &.mode-dark{
        background-color: $theme-dark-color;
        border-bottom-color: $theme-dark-color;
        color: #ffffff;
        /deep/.el-dropdown{
            color: #ffffff;
        }
    }
    &.mode-bright{
        background-color: $theme-bright-color;
        border-bottom-color: #E4E7ED;
        color: #303133;
        /deep/.el-dropdown{
            color: #303133;
        }
    }
    &.mode-blue{
        background-color: $theme-bright-color;
        border-bottom-color: #E4E7ED;
        color: #303133;
        /deep/.el-dropdown{
            color: #303133;
        }
        &.reverse{
            background-color: $theme-blue-color;
            border-bottom-color: $theme-blue-color;
            color: #FFFFFF;
            /deep/.el-dropdown{
                color: #FFFFFF;
            }
        }
    }
    &.mode-lightDark{
        background-color: $theme-lightDark-color;
        border-bottom-color: $theme-lightDark-color;
        color: #ffffff;
        /deep/.el-dropdown{
            color: #ffffff;
        }
    }

    .left{
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        
        .logo{
            display: flex;
            align-items: center;
            color: inherit;
            img{
                vertical-align: middle;
            }
            .title{
                font-size: 28px;
            }
        }
    }

    .center{
        display: flex;
        align-items: center;
        padding: 0 12px;
        position: relative;
    }

    .right{
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .right-item{
            margin: 0 10px;
        }
    }
    .dropdown-btn{
        padding: 4px;
        cursor: pointer;
    }
}
</style>